@extends('admin.common.web')

@section('title','角色权限分配')

@section('style')
    <style>
        ul li {
            list-style: none;
        }

        .child_permission{
            display: flex;
            flex-wrap: wrap;
        }

        .role_name{
            font-size: 18px;
        }

        .role_name span{
            color: #ff0000;
        }

        .bold_text{
            font-weight: bold !important;
        }

    </style>
@endsection

@section('content')
    <!-- Page Content -->
    <!-- Page Breadcrumb -->
    <div class="page-breadcrumbs">
        <ul class="breadcrumb">
            <li>
                <a href="{{ route('admin.index.index') }}">系统</a>
            </li>
            <li>
                <a href="{{ route('admin.role.index') }}">角色管理</a>
            </li>
            <li class="active">角色权限分配</li>
        </ul>
    </div>
    <!-- /Page Breadcrumb -->
    <!-- Page Body -->
    <div class="page-body">

        <div class="row">
            <div class="col-lg-12 col-sm-12 col-xs-12">
                <div class="widget">
                    <div class="widget-header bordered-bottom bordered-blue">
                        <span class="widget-caption">权限分配</span>
                    </div>
                    <div class="widget-body">
                        @include('admin.common.msg')
                        @include('admin.common.error')
                        <form class="form-horizontal" action="{{ route('admin.role.updatePermission',['id'=>$role['id']]) }}" method="post">
                            @csrf
                            <div class="role_name">
                                角色名
                                <span>{{ $role['role_name'] }}</span>
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" class="choose_all colored-danger">
                                    <span class="text">全选</span>
                                </label>
                            </div>

                            <ul id="permission_ul">
                                @foreach($permissionList as $v)
                                <li class="parent">
                                    <label>
                                        <input type="checkbox" name="permission_id[]" value="{{ $v['id'] }}" @if(in_array($v['id'],$permissionIds)) checked @endif class="parent_li colored-blue">
                                        <span class="text bold_text">{{ $v['permission_name'] }}</span>
                                    </label>
                                    @if(isset($v['child']))
                                    <ul class="child">
                                        @foreach($v['child'] as $v1)
                                        <li class="second">
                                            <label>
                                                <input type="checkbox" name="permission_id[]" value="{{ $v1['id'] }}" @if(in_array($v1['id'],$permissionIds)) checked @endif class="second_li colored-blue">
                                                <span class="text bold_text">{{ $v1['permission_name'] }}</span>
                                            </label>
                                            @if(isset($v1['child']))
                                            <ul class="child_permission child">
                                                @foreach($v1['child'] as $v2)
                                                <li class="third">
                                                    <label>
                                                        <input type="checkbox" name="permission_id[]" value="{{ $v2['id'] }}" @if(in_array($v2['id'],$permissionIds)) checked @endif class="third_li colored-blue">
                                                        <span class="text">{{ $v2['permission_name'] }}</span>
                                                    </label>
                                                </li>
                                                @endforeach
                                            </ul>
                                            @endif
                                        </li>
                                        @endforeach
                                    </ul>
                                    @endif
                                </li>
                                @endforeach
                            </ul>

                            {{--<div class="parent">
                                <label>
                                    <input type="checkbox" class="parent_input colored-blue">
                                    <span class="text">管理员管理</span>
                                </label>
                                <ul class="child">
                                    <li>
                                        <label>
                                            <input type="checkbox" class="child_chk colored-blue">
                                            <span class="text">管理员列表</span>
                                        </label>

                                        <ul class="child_permission">
                                            <li>
                                                <label>
                                                    <input type="checkbox" class="child_chk colored-blue">
                                                    <span class="text">管理员tianj</span>
                                                </label>
                                            </li>
                                            <li>
                                                <label>
                                                    <input type="checkbox" class="child_chk colored-blue">
                                                    <span class="text">管理员tianj</span>
                                                </label>
                                            </li>
                                            <li>
                                                <label>
                                                    <input type="checkbox" class="child_chk colored-blue">
                                                    <span class="text">管理员tianj</span>
                                                </label>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <label>
                                            <input type="checkbox" class="child_chk colored-blue">
                                            <span class="text">管理员列表</span>
                                        </label>

                                        <ul>
                                            <li>
                                                <label>
                                                    <input type="checkbox" class="child_chk colored-blue">
                                                    <span class="text">管理员列表</span>
                                                </label>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>

                            </div>--}}
                            {{--<div class="parent">
                                <label>
                                    <input type="checkbox" class="parent_input colored-blue">
                                    <span class="text">管理员管理</span>
                                </label>
                                <ul class="child">
                                    <li>
                                        <label>
                                            <input type="checkbox" class="child_chk colored-blue">
                                            <span class="text">管理员列表</span>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <input type="checkbox" class="child_chk colored-blue">
                                            <span class="text">管理员添加界面</span>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <input type="checkbox" class="child_chk colored-blue">
                                            <span class="text">管理员添加操作</span>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <input type="checkbox" class="child_chk colored-blue">
                                            <span class="text">管理员修改界面</span>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <input type="checkbox" class="child_chk colored-blue">
                                            <span class="text">管理与修改操作</span>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <input type="checkbox" class="child_chk colored-blue">
                                            <span class="text">管理员角色分配测试</span>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <input type="checkbox" class="child_chk colored-blue">
                                            <span class="text">管理员角色分配测试发放大</span>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <input type="checkbox" class="child_chk colored-blue">
                                            <span class="text">管理员角色分配测试发放大</span>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <input type="checkbox" class="child_chk colored-blue">
                                            <span class="text">管理员角色分配测试发放大</span>
                                        </label>
                                    </li>
                                    <li>
                                        <div class="parent">
                                            <label>
                                                <input type="checkbox" class="parent_input colored-blue">
                                                <span class="text">管理员管理</span>
                                            </label>
                                            <ul class="child">
                                                <li>
                                                    <label>
                                                        <input type="checkbox" class="child_chk colored-blue">
                                                        <span class="text">管理员列表</span>
                                                    </label>
                                                </li>
                                                <li>
                                                    <label>
                                                        <input type="checkbox" class="child_chk colored-blue">
                                                        <span class="text">管理员添加界面</span>
                                                    </label>
                                                </li>
                                                <li>
                                                    <label>
                                                        <input type="checkbox" class="child_chk colored-blue">
                                                        <span class="text">管理员添加操作</span>
                                                    </label>
                                                </li>
                                                <li>
                                                    <label>
                                                        <input type="checkbox" class="child_chk colored-blue">
                                                        <span class="text">管理员修改界面</span>
                                                    </label>
                                                </li>
                                                <li>
                                                    <label>
                                                        <input type="checkbox" class="child_chk colored-blue">
                                                        <span class="text">管理与修改操作</span>
                                                    </label>
                                                </li>
                                                <li>
                                                    <label>
                                                        <input type="checkbox" class="child_chk colored-blue">
                                                        <span class="text">管理员角色分配测试</span>
                                                    </label>
                                                </li>
                                                <li>
                                                    <label>
                                                        <input type="checkbox" class="child_chk colored-blue">
                                                        <span class="text">管理员角色分配测试发放大</span>
                                                    </label>
                                                </li>
                                                <li>
                                                    <div class="parent">
                                                        <label>
                                                            <input type="checkbox" class="parent_input colored-blue">
                                                            <span class="text">管理员管理</span>
                                                        </label>
                                                        <ul class="child">
                                                            <li>
                                                                <label>
                                                                    <input type="checkbox" class="child_chk colored-blue">
                                                                    <span class="text">管理员列表</span>
                                                                </label>
                                                            </li>
                                                            <li>
                                                                <label>
                                                                    <input type="checkbox" class="child_chk colored-blue">
                                                                    <span class="text">管理员添加界面</span>
                                                                </label>
                                                            </li>
                                                            <li>
                                                                <label>
                                                                    <input type="checkbox" class="child_chk colored-blue">
                                                                    <span class="text">管理员添加操作</span>
                                                                </label>
                                                            </li>
                                                            <li>
                                                                <label>
                                                                    <input type="checkbox" class="child_chk colored-blue">
                                                                    <span class="text">管理员修改界面</span>
                                                                </label>
                                                            </li>
                                                            <li>
                                                                <label>
                                                                    <input type="checkbox" class="child_chk colored-blue">
                                                                    <span class="text">管理与修改操作</span>
                                                                </label>
                                                            </li>
                                                            <li>
                                                                <label>
                                                                    <input type="checkbox" class="child_chk colored-blue">
                                                                    <span class="text">管理员角色分配测试</span>
                                                                </label>
                                                            </li>
                                                            <li>
                                                                <label>
                                                                    <input type="checkbox" class="child_chk colored-blue">
                                                                    <span class="text">管理员角色分配测试发放大</span>
                                                                </label>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </li>
                                </ul>
                            </div>--}}

                            <input type="hidden" value="{{ $role['id'] }}" name="role_id"/>
                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-10">
                                    <button type="submit" class="btn btn-info">保存信息</button>
                                    <a href="{{ route('admin.role.index') }}" class="btn btn-default">返回</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- /Page Body -->
@endsection
@section('script')
    <script type="text/javascript">
        $(() => {
            //父级选中
           /* $('.parent_input').click(function () {
                if ($(this).is(':checked')) {
                    //选择当前节点的父节点所有的下级checkbox
                    $(this).parent().parent('.parent').children('.child').find('input[type=checkbox]').prop('checked',true);

                    //把他们都变成选中状态
                    // $.each(ip, function (k, v) {
                    //     $(this).prop('checked', true);
                    // })

                    //获得所有的父元素
                    let parent = $(this).parents('.parent').find('> label > input');
                    //把他们都变成选中状态
                    $.each(parent, function (k, v) {
                        $(this).prop('checked', true);
                    })
                } else {
                    //选择当前节点的父节点所有的下级checkbox
                    $(this).parent().parent('.parent').children('.child').find('input[type=checkbox]').prop('checked',false);

                    //取消他们都选中状态
                    // $.each(ip, function (k, v) {
                    //     $(this).prop('checked', false);
                    // })

                    //判断自己的上级父节点是否有选中的，如果下级父节点下面没有一个选中的，那么，这个父节点也不选中
                    let prevParent= $(this).parents('.parent');

                    $.each(prevParent,function(k,v){
                        let chk_input = $(this).children('.child').find('input[type=checkbox]:checked');
                        if(chk_input.length == 0){
                            $(this).find('>label > input').prop('checked',false);
                        }
                    })
                }
            })*/
            //子级选中
            /*$('.child_chk').click(function () {
                if($(this).is(':checked')){
                    $(this).parents('.parent').find('> label > input').prop('checked',true);

                }else{
                    //获得我所有的父级
                    let my_parents = $(this).parents('.parent');
                    //如果父级中，如果其子级中，没有选中的，就关闭它
                    $.each(my_parents,function(k,v){
                        let chk_input = $(this).children('.child').find('input[type=checkbox]:checked');
                        if(chk_input.length == 0){
                            $(this).find('>label > input').prop('checked',false);
                        }
                    })
                }
            })*/

            let input = $('#permission_ul input');

            let count = 0;
            $.each(input,function(k,v){
                //如果有一个没有选中的，就增加计数
                if(!$(this).is(':checked')){
                    count++;
                }
            })

            if(count == 0){
                $('.choose_all').prop('checked',true);
            }
        })

    </script>

    <script type="text/javascript">
        $('.parent_li').click(function () {
            if($(this).is(':checked')){
                $(this).parent().parent().find('.child input').prop('checked',true);
            }else{
                $(this).parent().parent().find('.child input').prop('checked',false)
            }
        })

        $('.second_li').click(function () {
            if($(this).is(':checked')){
                $(this).parent().parent().find('.child input').prop('checked',true);
                $(this).parents('.parent').find(' > label > input').prop('checked',true);
            }else{
                $(this).parent().parent().find('.child input').prop('checked',false);

                //判断兄弟节点有没有选中的
                let secondSiblingsNode = $(this).parent().parent('li').siblings().find('input:checked');
                if(secondSiblingsNode.length == 0){
                    $(this).parents('.parent').find(' > label > input').prop('checked',false);
                }
            }
        })

        $('.third_li').click(function () {
            if($(this).is(':checked')){
                $(this).parents('.parent').find('.parent_li').prop('checked',true);

                $(this).parents('.second').find('.second_li').prop('checked',true);
            }


            /*else{
                //判断兄弟节点的选中状态
                let siblingsNode = $(this).parent().parent('li').siblings().find('input:checked');

                if(siblingsNode.length == 0){
                    $(this).parents('.second').find('.second_li').prop('checked',false);

                    let secondSiblingsNode = $(this).parents('.second').siblings().find('input:checked');
                    if(secondSiblingsNode.length == 0){
                        $(this).parents('.parent').find('.parent_li').prop('checked',false);
                    }
                }
            }*/
        })

        //全选
        $('.choose_all').click(function () {
            if($(this).is(':checked')){
                let inputNode = $(this).parent().parent().nextAll('ul');

                $.each(inputNode,function(k,v){
                    $(this).find('input[type=checkbox]').prop('checked',true);
                })
            }else{
                let inputNode = $(this).parent().parent().nextAll('ul');

                $.each(inputNode,function(k,v){
                    $(this).find('input[type=checkbox]').prop('checked',false);
                })
            }
        })
    </script>
@endsection
